.body {
  width: 300px;
  height: 232px;
  position: relative;
  left: 50%;
  top: -20px;
  margin-left: -150px;
  z-index: 0;
}

.html {
  position: relative;
  height: 65vh;
}

.peppa {
  position: absolute;
  bottom: 0;
  left: 50%;
}

@media (max-width: 500px) {
  .peppa {
    left: 50%;
    transform: translateX(-50%);
  }
}

.header {
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  top: 50px;
  margin-left: -100px;
  z-index: 1;
}

.header .face {
  width: 160px;
  height: 160px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -80px;
}

.header .nose {
  position: absolute;
  width: 160px;
  top: 20px;
  height: 100px;
}

.header .nose .nostril {
  width: 42px;
  height: 58px;
  position: absolute;
  top: 10px;
  left: -4px;
}

.header .nose .nostril::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 2px;
}

.header .nose .nostril::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 16px;
}


.header .nose::before {
  content: "";
  display: block;
  width: 104px;
  height: 36px;
  position: absolute;
  left: 42px;
  bottom: -8px;
}

.header .nose::after {
  content: "";
  display: block;
  width: 55px;
  height: 60px;
  position: absolute;
  top: 15px;
  right: -8px;
}

.header .nose .left_eye {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  right: 52px;
  top: 10px;
}

.header .nose .left_eye::before {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  margin-top: 4px;
  margin-left: 2px;
}

.header .nose .right_eye {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  right: 16px;
  top: 22px;
}

.header .nose .right_eye::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  margin-top: 4px;
  margin-left: 2px;
}

.header .nose .check {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 63px;
  right: -24px;
}

.header .face .lip {
  width: 64px;
  height: 68px;
  position: absolute;
  bottom: 37px;
  left: 15px;
}

.header .left_ear {
  width: 32px;
  height: 50px;
  position: absolute;
  right: 52px;
  top: 0px;
}

.header .right_ear {
  width: 32px;
  height: 50px;
  position: absolute;
  right: 18px;
  top: 22px;
}

.body .belly {
  width: 200px;
  height: 232px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  bottom: 0px;
  margin-left: -100px;

}

.body .hidden {
  width: 196px;
  height: 96px;
  right: 51px;
  position: absolute;
  bottom: 0px;
}

.body .left_arm {
  width: 80px;
  height: 8px;
  position: absolute;
  left: -10px;
  top: 78px;
}

.body .left_arm::before {
  content: "";
  height: 8px;
  width: 20px;
  position: absolute;
  top: -8px;
  left: 4px;
}

.body .left_arm::after {
  content: "";
  height: 8px;
  width: 20px;
  position: absolute;
  top: 8px;
  left: 6px;
}

.body .right_arm {
  width: 80px;
  height: 8px;
  position: absolute;
  right: -10px;
  top: 72px;
}

.body .right_arm::before {
  content: "";
  height: 8px;
  width: 20px;
  position: absolute;
  bottom: -8px;
  right: 4px;
}

.body .right_arm::after {
  content: "";
  height: 8px;
  width: 20px;
  position: absolute;
  bottom: 8px;
  right: 6px;
}

.body .footer {
  width: 196px;
  height: 90px;
  position: absolute;
  bottom: -1px;
  right: 51px;
}

.body .footer .left_foot::before {
  content: "";
  display: block;
  width: 52px;
  margin-left: -42px;
  margin-top: 35px;
  height: 14px;
}

.body .footer .right_foot::before {
  content: "";
  display: block;
  width: 52px;
  height: 14px;
  margin-left: -42px;
  margin-top: 35px;
}